<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{
	margin: 0px;
	padding: 0px;
}
iframe{
	border: none;
}
</style>
</head>
<body style="overflow: hidden;">
	
	<div style="position: absolute; width: 100%; height: 100%; top: 0;left: 0;">
		<iframe id="targetIfi" style="width: 100%; height: 100%;"></iframe>
	</div>
	<div style="position: absolute; width: 300px; height:500px; left: 20px; bottom: 20px;">
		<div style="height: 50%; width: 100%;">
			<iframe id="myIfi" style="width: 300px; height:500px;"></iframe>
			<h1>我的ID:<span id="myId"></span></h1>
			<p>远程ID:<input type="text" id="targetId" placeholder="TARGET ID"/></p>
			<button id="open">开始通话</button>
		</div>
	</div>
</body>
<script src="/static/js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/static/lib/layer/mobile/layer.js" charset="utf-8"></script>
<script src="/static/js/stomp.js" type="text/javascript"></script>
<script src="/static/js/websocket.js" type="text/javascript"></script>
<script type="text/javascript">

	if(IsPC()){
		window.location.href="/deerim/pcim";
	}

	var number=parseInt(Math.random() * (9999 - 1000 + 1) + 1000); 
	$("#myId").html(number);
	
	$("#open").click(function(){
		websocket.send("/topic/chat"+$("#targetId").val(),JSON.stringify({command:"request","id":number}));
	});
	
	function init(w){
		layer.open({
    	    content: "请选择摄像头",
    	    shadeClose:false,
    	    btn: ['前置摄像头', '后置摄像头'],
    	    yes: function(index){
    	    	$("#myIfi").attr("src","collection?id="+number+"&facingMode=user");
    	    	layer.close(index); 
    	    },
        	no: function(index){
        		$("#myIfi").attr("src","collection?id="+number+"&facingMode=environment");
    	    }
    	});
		
		w.subscribe("/topic/chat"+number,function(msg){
			var data=JSON.parse(msg.body);
			console.log(data);
			switch(data.command){
			case "request":
				layer.open({
            	    content: '用户'+data.id+"请求视频通话",
            	    shadeClose:false,
            	    btn: ['接收', '拒绝'],
            	    yes: function(index){
            	    	websocket.send("/topic/chat"+data.id,JSON.stringify({"command":"receive","id":number}));
            	    	$("#targetIfi").attr("src","show?id="+data.id+"&type=im");
            	    	layer.close(index); 
            	    },
	            	no: function(index){
	            		websocket.send("/topic/chat"+data.id,JSON.stringify({"command":"noReceive"}));
	        	    }
            	});
				break;
			case "receive":
				$("#targetIfi").attr("src","show?id="+data.id+"&type=im");
				break;
			case "noReceive":
				layer.msg('对方拒绝');
				break;
			}
		});
	}
	
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
            "SymbianOS", "Windows Phone",
            "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }
</script>
</html>